<div id="content_header">
  <h3>Staff</h3>
</div>

<div class="row row-unstyled">
  <div class="col-md-12">
    <label>SEARCH</label>
  </div>
</div>

<div class="row">
  <div class="col-md-6 col-lg-5">
    <form class="form-vertical" ng-submit="pageChanged(1)">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Staff Type <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li ng-repeat="type in searchTypes" ng-class="{active: params.staff_type===type.Query}">
              <a href ng-click="params.staff_type=type.Query">{{ type.Label }}</a>
            </li>
          </ul>
        </div>
        <input class="form-control" type="text" name="keyword" placeholder="Type Name to search" ng-model="params.name">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Search</button>
        </span>
      </div>
    </form>
  </div>
  <div class="col-md-6">
    <a ui-sref="^.new" class="btn btn-primary">Register a new Staff</a>
  </div>
</div>

<br>

<div class="row">
  <div class="col-md-12">
    <label>RESULTS</label>
    <div class="search-message">
      Found <span class="primary-color"><b>{{ totalItems }}</b></span> records
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <table class="table table-stripped table-bordered" ng-show="totalItems > 0">
      <thead>
        <tr>
          <th>Staff Name</th>
          <th>Staff Type</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr dir-paginate="staff in staffs | itemsPerPage: pagesize" total-items="totalItems">
          <td>{{ staff.Name }}</td>
          <td>{{ StaffTypes[staff.StaffType].Name }}</td>
          <td>
            <a class="" href ng-really-message="Are you sure want to delete this data?" ng-really-click="delete('staffs', staff.Id, {collection: staffs, index: $index})"><i class="simple-icon-trash"></i></a>
            <a class="" ui-sref="^.show({id: staff.Id})"><i class="glyphicon glyphicon-edit"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
    <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
  </div>
</div>